<template>
  <div class="account">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="danger" @click="xinzeng">新 增</el-button>
      </div>
      <template>
        <el-table :data="accoutList" style="width: 100%">
          <el-table-column fixed prop="index" label="序号" width="100" />
          <el-table-column prop="name" label="品牌名称" width="100" />
          <el-table-column prop="showStatus" label="展示状态" width="180">
            <template v-slot="sisui">
              是否展示
              <el-switch
                v-model="sisui.row.showStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="gaibian(sisui.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="date" label="LOGO" width="150">
            <template v-slot="sisui">
              <div style="width: 100px; height: 100px">
                <img
                  :src="sisui.row.logo"
                  style="width: 100%; height: 100%"
                  alt=""
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="bigPic" label="专区大图" width="150">
            <template v-slot="sisui">
              <div style="width: 100px; height: 100px">
                <img
                  :src="sisui.row.bigPic"
                  style="width: 100%; height: 100%"
                  alt=""
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brandStory" label="品牌故事" width="130" />
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="sort" label="排序" width="100" />
          <el-table-column
            prop="productCommentCount"
            label="产品评论数量"
            width="100"
          />
          <el-table-column prop="productCount" label="产品数量" width="100" />
          <el-table-column
            prop="factoryStatus"
            label="是否品牌制造商"
            width="100"
          >
            <template v-slot="sisui">
              {{ sisui.row.factoryStatus ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template v-slot="sisui">
              <el-link
                type="primary"
                :underline="false"
                @click="openBianJi(sisui.row)"
              >修改</el-link>
              <el-link
                type="danger"
                :underline="false"
                @click="open(sisui.row)"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="start"
          :page-sizes="[2, 4, 6, 8, 10, 20, 30]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="品牌详情" :visible.sync="dialogFormVisible" @closed="reser">
      <el-form :model="shujuList">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌名称" style="margin-right: 30px">
              <el-input v-model="shujuList.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首字母">
              <el-input v-model="shujuList.firstLetter" autocomplete="off" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" style="margin-right: 30px">
              <el-input v-model="shujuList.sort" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品数量">
              <el-input v-model="shujuList.productCount" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否展示" style="margin-right: 30px">
              <el-switch v-model="showStatus" @change="zhanshi($event)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否为品牌制造商">
              <el-switch
                v-model="factoryStatus"
                @change="zhizhaoshang($event)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" style="margin-right: 30px">
              <div slot="header" class="clearfix">
                <span style="font-size:20px">上传专区大图</span>
              </div>
              <el-form-item class="tupian">
                <el-upload
                  ref="upremove"
                  action="/lejuAdmin/material/uploadFileOss"
                  :on-success="handImg"
                  :headers="tokens"
                >

                  <i class="el-icon-plus" />
                </el-upload>

              </el-form-item>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span style="font-size:20px">上传Logo</span>
              </div>

              <el-form-item class="tupian">
                <el-upload
                  ref="Logoupremove"
                  action="/lejuAdmin/material/uploadFileOss"
                  :on-success="LogoImg"
                  :headers="tokens"
                >
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newPinPai">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/myAuth'
import {
  findBrandByPage,
  delBrand,
  switchShowStatus,
  addBrand
} from '@/api/product/judge/index.js'
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      LogoUrl: '',
      LogVisible: false,
      dialogFormVisible: false,
      showStatus: 'false',
      factoryStatus: 'false',
      start: 1,
      limit: 9,
      total: 0,
      // 请求到的数据
      accoutList: [],
      // 需要上传的数据
      shujuList: {
        bigPic: '',
        brandStory: '',
        createTime: '',
        factoryStatus: '0',
        firstLetter: '',
        id: '',
        logo: '',
        modifyTime: '',
        name: '',
        productCommentCount: '',
        productCount: '',
        showStatus: '0',
        sort: ''
      }
    }
  },
  computed: {
    // 上传图片没有携带本地存储的登录信息，需要手动添加上去
    tokens() {
      return {
        token: getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findBrandByPage(this.start, this.limit).then((res) => {
        console.log(res)
        res.data.rows.forEach((ele) => {
          ele.showStatus = !!ele.showStatus
        })
        this.total = res.data.total
        this.accoutList = res.data.rows
        console.log(this.accoutList[0].showStatus)
      })
    },

    // 点击修改是否展示状态
    gaibian(e) {
      var status = e.showStatus ? 1 : 0
      console.log(status)
      switchShowStatus({
        id: e.id,
        status
      }).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.init()
        } else {
          this.$message.error('修改失败')
          this.init()
        }
      })
    },
    // 点击页数发送请求新数据
    handleCurrentChange(e) {
      // console.log(e)
      this.start = e
      this.init()
    },
    // 点击条数/页触发请求新数据
    handleSizeChange(e) {
      this.limit = e
      this.init()
      // obj.protype.toString.call(需要检测的值)  检测数据类型
    },
    // 点击新增按钮 打开弹窗
    xinzeng() {
      console.log(666)
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 点击关闭，弹窗内容清空
    reser() {
      this.shujuList = {
        bigPic: '',
        brandStory: '',
        createTime: '',
        factoryStatus: '',
        firstLetter: '',
        id: '',
        logo: '',
        modifyTime: '',
        name: '',
        productCommentCount: '',
        productCount: '',
        showStatus: '',
        sort: ''
      }
    },
    // 点击修改
    openBianJi(e) {
      console.log(e)
      this.shujuList = e
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 点击是否展示
    zhanshi(e) {
      console.log(e)
      this.shujuList.showStatus = e ? '1' : '0'
    },
    // 点击是否为制造商品牌
    zhizhaoshang(e) {
      console.log(e)
      this.shujuList.factoryStatus = e ? '1' : '0'
    },
    // 图片上传成功
    handImg(response, file, fileList) {
      console.log(response, file, fileList)
      this.shujuList.bigPic = response.data.fileUrl
      this.$refs.upremove.clearFiles()
    },
    LogoImg(response, file, fileList) {
      console.log(response, file, fileList)
      this.shujuList.logo = response.data.fileUrl
      this.$refs.Logoupremove.clearFiles()
    },
    // 点击确定发送请求
    newPinPai() {
      addBrand(this.shujuList).then(res => {
        console.log(res)
        if (res.success) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.dialogFormVisible = !this.dialogFormVisible
          this.init()
        }
      })
    },
    // 点击删除
    open(e) {
      console.log(e.id)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delBrand(e.id).then((res) => {
            // console.log(res)
            // console.log(res.success)
            if (res.success) {
              // this.$message('删除成功');
              this.init()
            } else {
              this.$message('删除失败')
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  margin: 30px;
  .tupian{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    border:1px solid #000;
    .el-icon-plus{
      font-size: 30px;
      line-height: 100px;
    }
  }
}
</style>
